<template>
  <div id="app"></div>
</template>

<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const IMG_URL = require("@/assets/brick001.jpg");
// const IMG_URL = '/api/texture/brick001.jpg';

console.log('IMG_URL', IMG_URL)

THREE.TextureLoader.prototype.loadAsync = function (url) {
  return new Promise((resolve, reject) => {
    this.load(url, resolve, undefined, reject);
  }).catch((err) => {
    console.error(err);
    return Promise.reject(err);
  });
};

export default {
  name: 'App',
  data() {
    return {
    }
  },

  async mounted() {
    // 获取窗口的宽度和高度
    const width = window.innerWidth, height = window.innerHeight;

    // 初始化
    // 创建透视相机
    const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
    camera.position.z = 1;

    // 创建场景
    const scene = new THREE.Scene();

    // 创建材质
    // const material = new THREE.MeshNormalMaterial();
    const material = new THREE.MeshLambertMaterial({ color: 0x884422 }); // 使用带有漫反射的材质

    /*===============  纹理 start  ===============*/
    const loader = new THREE.TextureLoader();
    const texture = await loader.loadAsync(IMG_URL);

    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.minFilter = THREE.LinearFilter;

    material.map = texture;
    material.needsUpdate = true;
    /*===============  纹理 start  ===============*/

    /*===============  立方体 start  ===============*/
    /** 创建立方体几何体 */
    // const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
    // /** 创建网格 */
    // const mesh = new THREE.Mesh(geometry, material);
    // mesh.aaaaaaa66666 = undefined;
    // scene.add(mesh);
    /*===============  立方体 end  ===============*/

    /*===============  金字塔 tart  ===============*/
    const pyramidGeom = new THREE.BufferGeometry();
    const vertices = [
      // 顶点坐标数组
      1, 0, 1,
      1, 0, -1,
      -1, 0, -1,
      -1, 0, 1,
      0, 1, 0
    ];

    const indices = [
      // 面索引数组
      3, 2, 1,
      3, 1, 0,
      3, 0, 4,
      0, 1, 4,
      1, 2, 4,
      2, 3, 4
    ];

    // UV坐标数组
    const uvs = [
      // 每个顶点对应一对UV值 (u, v)
      1, 0, // 顶点0：右上角 (1, 0)
      1, 1, // 顶点1：右下角 (1, 1)
      0, 1, // 顶点2：左下角 (0, 1)
      0, 0, // 顶点3：左上角 (0, 0)
      0.5, 0.5 // 顶点4：顶部中心 (0.5, 0.5)
    ];

    // 创建UV属性并将其添加到金字塔几何体
    pyramidGeom.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));

    pyramidGeom.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); // 设置顶点属性
    pyramidGeom.setIndex(indices); // 设置面索引

    // 创建网格
    const meshPy = new THREE.Mesh(pyramidGeom, material);
    meshPy.aaaaaaa66666 = undefined;
    scene.add(meshPy);
    /*===============  金字塔 end  ===============*/


    // 创建WebGL渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(width, height);
    // renderer.setAnimationLoop(animation);
    // document.body.appendChild(renderer.domElement);

    // 创建并初始化轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true; // 启用阻尼效果，让相机运动更平滑
    controls.dampingFactor = 0.25; // 设置阻尼因子
    controls.screenSpacePanning = false; // 禁止基于屏幕空间的平移
    controls.minDistance = 1; // 设置相机最小距离
    controls.maxDistance = 5; // 设置相机最大距离

    // 调整相机位置以便更好地观察金字塔
    camera.position.set(0, 2, 5); // 设置相机在 x=0, y=2, z=5 的位置

    // 更改材质以增强视觉效果，并添加环境光源
    const ambientLight = new THREE.AmbientLight(0xffffff, 5); // 添加环境光
    scene.add(ambientLight);

    // 动画

    // 更新渲染循环以同步控制器状态
    function animation(time) {
      controls.update(); // 更新控制器，处理鼠标交互
      if (meshPy) meshPy.rotation.x = time / 2000;
      if (meshPy) meshPy.rotation.y = time / 1000;
      if (!time) console.log(time)

      renderer.render(scene, camera);
    }
    renderer.setAnimationLoop(animation);

    // 添加到DOM元素中
    document.body.appendChild(renderer.domElement);
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
